


<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="20">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="岗位名称:">
            <el-input v-model="name" placeholder="岗位名称"></el-input>
          </el-form-item>

          <el-form-item label="组织:" prop="areaName">
            <el-select
              ref="selectRef"
              v-model="region"
              clearable
              @clear="dd"
              placeholder="组织"
            >
              <el-option
                label="请选择"
                value=""
                style="display: none"
              ></el-option>
              <el-tree
                :data="data"
                :props="defaultProps"
                @node-click="handleNodeClick"
              ></el-tree>
            </el-select>
          </el-form-item>

          <el-date-picker
            v-model="sj1"
            type="datetime"
            placeholder="选择开始日期时间"
          >
          </el-date-picker>

          <el-date-picker
            v-model="sj2"
            type="datetime"
            placeholder="选择结束日期时间"
          >
          </el-date-picker>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-container>
      <el-button
        class="el-icon-circle-plus"
        size="mini"
        type="primary"
        @click="addEmp()"
        >添加</el-button
      >
    </el-container>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="systemPostName" label="岗位名称" width="180">
      </el-table-column>
      <el-table-column prop="systemPostDescribe" label="描述" width="180">
      </el-table-column>

      <el-table-column
        prop="xsgInstitutionsTmsOrganizationManagement.cliqueName"
        label="组织"
        width="180"
      >
      </el-table-column>

      <el-table-column
        prop="systemPostStatus"
        label="状态"
        width="100"
        :filters="[
          { text: '启用', value: '0' },
          { text: '禁用', value: '1' },
        ]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <el-tag disable-transitions>
            <span v-if="scope.row.systemPostStatus == 1">禁用</span
            ><span v-if="scope.row.systemPostStatus == 0">启用</span>
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="systemPostTime"
        label="创建时间"
        sortable
        width="180"
      >
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >

          <el-button size="mini" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[2, 4, 6]"
      :page-size="4"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <el-dialog title="提示" :visible.sync="dialogFormVisible">
      <el-form
        :model="form"
        :rules="rules"
        ref="form1"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="岗位名称:"
          prop="systemPostName"
          style="margin-left: 100px"
        >
          <el-input v-model="form.systemPostName"></el-input>
        </el-form-item>
        <br />
        <br />
        <el-form-item label="组织:" style="margin-left: 100px">
          <el-select
            ref="selectRef"
            v-model="region1"
            clearable
            @clear="dd"
            placeholder="组织"
          >
            <el-option
              label="请选择"
              value=""
              style="display: none"
            ></el-option>
            <el-tree
              :data="data"
              :props="defaultProps"
              @node-click="handleNodeClick1"
            ></el-tree>
          </el-select>
        </el-form-item>

        <br />
        <br />

        <el-form-item label="状态:" style="margin-left: 100px">
          <el-select v-model="form.systemPostStatus" placeholder="请选择状态">
            <el-option label="启用" value="0">启用</el-option>
            <el-option label="禁用" value="1">禁用</el-option>
          </el-select>
        </el-form-item>

        <br />
        <br />

        <el-form-item label="描述:" style="margin-left: 100px">
          <el-input v-model="form.systemPostDescribe"></el-input>
        </el-form-item>
        <br />
        <br />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateAndAdd()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

 



  

<script>
import axios from "axios";
export default {
  data() {
    return {
      region1: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },

      data: [],
      defaultProps: {
        children: "childrenxsgInstitutionsTmsOrganizationManagement",
        label: "cliqueName",
      },

      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        cliqueId: this.cliqueId,
      },
      formLabelWidth: "120px",
      tableData: [],
      currentPage4: 1, //当前页
      num: 4, //每页条数
      total: 0,
      numshu: 1,
      bj: "",
      id: "",
      did: "",
      name: "",
      sj1: "",
      sj2: "",
      region: "",
      cliqueId: "",
      dialogFormVisible: false,
      formLabelWidth: "120px",

      PostId: "",
      systemPostName: "",

      rules: {
        systemPostName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    currStationChange(val) {
      console.log("currStationChange", val);
      if (val) {
        this.queryUnit(val);
      } else {
        // 所属厂站没有值，清空操作单元的值
        this.formData.unitId = null;
        // 所属厂站没有值，清空操作单元下拉框选项
        this.unitTree = [];
      }
    },
    dd() {
      this.id = "";
    },

    handleNodeClick1(data) {
      this.cliqueId = data.cliqueId;

      this.region1 = data.cliqueName;
    },

    handleNodeClick(data) {
      this.id = data.cliqueId;

      this.region = data.cliqueName;
    },

    handleDelete(row) {
      //建议使用静态删除 data.splice(index,1)

      console.log(row);
      this.$confirm("确定删除此员工吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios
            .get("/api/systemTmsPostdeleteByPrimaryKey", {
              params: { id: row.systemPostId },
            })
            .then((data) => {
              alert("删除成功");
              this.getEmpList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    updateAndAdd() {
      this.$refs.form1.validate((valid) => {
        if (valid) {
          if (this.bj == "true") {
            axios
              .get("/api/updateByPrimaryKeySelective", {
                params: {
                  name: this.form.systemPostName,
                  cliqueId1: this.cliqueId,
                  status: this.form.systemPostStatus,
                  describe: this.form.systemPostDescribe,
                  id: this.PostId,
                },
              })
              .then((data) => {
                alert("修改成功");
                this.getEmpList();
                this.dialogFormVisible = false;
              });
          } else {
            console.log(this.cliqueId);
            axios
              .get("/api/systemtmsPostAdd", {
                params: {
                  record: JSON.stringify(this.form),
                  cliqueId: this.cliqueId,
                },
              })
              .then((data) => {
                alert("添加成功");
                this.getEmpList();
                this.dialogFormVisible = false;
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    filterTag(value, row) {
      console.log(row.xsgInstitutionsTmsOrganizationManagement.cliqueStatus);
      return (
        row.xsgInstitutionsTmsOrganizationManagement.cliqueStatus === value
      );
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
      dleEdit;
    },

    addEmp() {
      this.region1 = "";
      this.dialogFormVisible = true;
      this.form = {};
      this.bj = "false";
    },

    handleEdit(index, row) {
      this.region1 = row.xsgInstitutionsTmsOrganizationManagement.cliqueName;
      console.log(row);
      this.PostId = row.systemPostId;
      this.form = row;
      this.bj = "true";
      this.dialogFormVisible = true;
    },

    onSubmit() {
      this.getEmpList();
    },
    getEmpList() {
      axios
        .get("/api/SystemGangAllList", {
          params: {
            page: this.currentPage4,
            num: this.num,
            name: this.name,
            region: this.id,
            datetimes: this.sj1,
            datetimes1: this.sj2,
          },
        })
        .then((data) => {
          console.log(data.data);
          this.tableData = data.data.rows; //获取分页数据
          this.total = data.data.total; //获取总记录数
        });
    },

    handleSizeChange(val) {
      console.log("数据" + val);
      this.num = val;

      this.getEmpList();
    },
    handleCurrentChange(val) {
      console.log("当前页" + val);
      this.currentPage4 = val;
      this.getEmpList();
    },

    getCaidan() {
      axios.get("/api/jigocaidanAllList").then((data) => {
        this.data = data.data;
      });
    },
  },
  created() {
    this.getEmpList();
    this.getCaidan();
  },
};
</script>